<!-- Author:Rain -->
<template>
    <div id="wrap" class="wrap-sign"><!---->
        <div class="page-sign">
            <div class="login-register-unite">
                <div class="login-register-content">
                    <div class="login-phone-wrapper">
                        <h3 class="title">手机号密码登录/注册</h3>
                        <span class="sub-title">首次验证通过即注册ForJob账号</span>
                        <div class="sms-form-wrapper">
                            <ul class="identity-tab">
                                <li @click="changeSignType($event as any)" data-signup="geek"
                                    :class="signup == signupType.geek ? 'active' : ''">我要找工作</li>
                                <li @click="changeSignType($event as any)" data-signup="boss"
                                    :class="signup == signupType.boss ? 'active' : ''">我要招聘</li>
                            </ul>
                            <div class="sms-form-row">
                                <div class="phone-input-wrapper">
                                    <span class="ipt-wrap"><input v-model="phone" type="tel"
                                            placeholder="手机号"><!----></span>
                                </div><!---->
                            </div>
                            <div class="sms-form-row">
                                <div class="sms-input-wrapper">
                                    <span class="ipt-wrap">
                                        <input v-model="passwd" type="password" placeholder="密码" maxlength="20">
                                        <!-- 验证码 -->
                                        <!-- <div ka="send_sms_code_click" class="btn-sms"><span>发送验证码</span></div> -->
                                    </span>
                                </div>
                            </div>
                            <div class="sms-form-btn">
                                <button type="submit" @click.prevent="signupSubmit" class="sure-btn">登录/注册</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!---->
    </div>
</template>

<script setup lang="ts" name="login-register">
import { useRouter } from "vue-router"
import { useUserStore } from "@/store/modules/user"
const userStore = useUserStore()
let router = useRouter();
enum signupType {
    geek = "geek",
    boss = "boss"
}
let signup = ref<string>(signupType.geek)
function changeSignType({ target }: { target: HTMLElement }) {
    signup.value = target.dataset.signup as string
}
let phone = ref<string>("13187200081");
let passwd = ref<string>("123");
async function signupSubmit() {
    // test 
    // router.push({path:"/guide",query: { identity:signup.value }})

    //这里将数据封装传给后端，进行验证！
    // 同时存储到状态管理库
    let formData={ password: passwd.value, signType: signup.value, phone: phone.value }
    userStore.login(formData).then(val => {
         //验证成功(是登录还是注册)！跳转：登录跳转主页面，注册跳转到邀请填写在线简历信息
        const {data,msg,code}=val as any    
        
        console.log(val);
        

        if(code==201){//表示注册成功
            //邀请用户填写一份在线简历
            router.push({path:"/guide",query: { identity:signup.value }})
        }

        if(code==200){//表示登录成功
            //跳转到首页
            router.push({path:"/",query: { identity:signup.value }})
        }

        if(code==401){//表示注册或登录失败
            console.log('登录或注册失败');
        }

        ElMessage({
            message: msg,
            type: code==200||code==201?'success':"error",
        })
       
    }).catch(err=>{
        //判断什么有问题？进行前端验证！！！
        console.log(err,"LLLl");
    })
   

}


</script>

<style scoped lang="less">
@import "@/assets/global.less";
#wrap {
    min-height: 100%;
    overflow: hidden;
    height: 100vh;
}

.page-sign {
    min-height: 100%;
    background: var(--themeColor) url("/api/images/assets/bg5.png") bottom/100% auto no-repeat;
    background-size: 120% 100%;
}

.login-register-unite {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 490px;
    height: 480px;
    margin-left: -244px;
    margin-top: -240px;
    background: #fff;
    box-shadow: 0 6px 13px 0 rgba(0, 0, 0, .1);
    border-radius: 28px;
    z-index: 2;
    box-sizing: border-box;
}

.login-register-unite .login-register-content {
    float: left;
    position: relative;
    width: 488px;
    padding: 48px 0;
}

.login-phone-wrapper {
    position: relative;
    width: 360px;
    margin: 0 auto;
}

.login-phone-wrapper .title {
    font-size: 22px;
    font-weight: 500;
    color: #222;
    line-height: 30px;
    text-align: center;
}

.login-phone-wrapper .sub-title {
    display: block;
    color: #999;
    line-height: 17px;
    text-align: center;
    margin-top: 8px;
    font-size: 12px;
}

.login-phone-wrapper .sms-form-wrapper {
    margin-top: 12px;
}

.sms-form-wrapper .identity-tab {
    width: 100%;
    margin-bottom: 20px;
    padding: 4px;
    background: #f8f8f8;
    border-radius: 12px;
    overflow: hidden;
}

.sms-form-wrapper .identity-tab li {
    float: left;
    width: 50%;
    height: 40px;
    font-size: 16px;
    color: #444;
    line-height: 40px;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s linear;
}

.sms-form-wrapper .identity-tab li.active {
    font-weight: 500;
    color: var(--themeColor);
    background: #fff;
    cursor: default;
}

.sms-form-wrapper .sms-form-row {
    position: relative;
}

.sms-form-wrapper .phone-input-wrapper {
    position: relative;
    border: 1px solid #d0d2d9;
    height: 48px;
    padding-left: 10px;
    border-radius: 8px;
    box-sizing: border-box;
    transition: all .2s linear;
}

.sms-form-wrapper .ipt-wrap {
    position: relative;
    display: block;
}

.sms-form-wrapper .ipt-wrap input {
    border: none;
    outline: none;
    display: block;
    width: 100%;
    font-size: 16px;
    line-height: 46px;
    height: 46px;
    padding-right: 20px;
    box-sizing: border-box;
    border-radius: 0 8px 8px 0;
    padding-left: 10px;
}

.sms-form-wrapper .sms-form-row+.sms-form-row {
    margin-top: 28px;
}

.sms-form-wrapper .sms-input-wrapper {
    position: relative;
    border: 1px solid #d0d2d9;
    height: 48px;
    border-radius: 8px;
    box-sizing: border-box;
    transition: all .2s linear;
}

.sms-form-wrapper .sms-input-wrapper .ipt-wrap input {
    border: none;
    outline: none;
    display: block;
    width: 100%;
    font-size: 16px;
    line-height: 46px;
    height: 46px;
    padding-right: 20px;
    padding-left: 20px;
    box-sizing: border-box;
    border-radius: 8px;
}

.sms-form-wrapper .btn-sms {
    position: absolute;
    right: 1px;
    top: 1px;
    line-height: 44px;
    height: 44px;
    border-radius: 8px;
    letter-spacing: 1px;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    background-color: #fff;
    padding: 0 20px;
    color: var(--themeColor);
    border: 0;
}

.sms-form-wrapper .sms-form-btn {
    margin-top: 30px;
}

.sms-form-wrapper .sms-form-btn .sure-btn {
    display: block;
    width: 100%;
    background: linear-gradient(90deg, var(--themeColor), hsl(6.46deg 57.87% 69.84%));
    border-radius: 8px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    color: #fff;
    padding: 0;
    transition: all .2s linear;
}
</style>